<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拉钩作业登录</title>
    <style>
        .line{
            margin-top: 20px;
            width: 161px;
        }
        .line .shuru{
            width: 100px;
            height: 25px;
            border: 1px solid #0075d2;/*输入框的边框样式*/
            border-radius: 3px;
            padding-left: 3px;/*这是输入指针线与边框的距离     内边距*/
        }
        .line .chongzhi{
            width: 50px;
            height: 20px;
            border: 1px solid #0075d2;
            border-radius: 3px;/*边框的圆角，不是方的是有弧度的更美观*/
            color: #0075d2;
            background-color: #fff;
            float: left;
        }
        .line .tijiao{
            width: 50px;
            height: 20px;
            border-radius: 3px;
            color: #fff;
            background-color: #0075d2;
            float: right;
            border: 0;
        }
    </style>
</head>
<body>
<!--form标签的作用就是限制标签的区域，比如遇到重置按钮时，让重置的内容限于一定区域这样才会不是所有的都重置-->
<form action="/demo1/test" method="get">
    <div class="line">
        <span>账号:</span>
        <input type="text" name="username"/>
    </div>
    <div class="line">
        <span>密码:</span><!--span标签意思是不换行-->
        <input type="password" name="password"/><!--输入密码的框-->
    </div>
    <div class="line">
        <input type="reset" class="重置" /><!--重置按钮-->
        <input type="submit" class="提交"/><!--提交-->
    </div>
</form>
</body>

</html>